<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    >
    <div ref="print" id="printArea">
      <div
        v-for="(item, index) in dayinlist"
        :key="index"
      >
      <el-row>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            style="text-align: center"
          >
            <span
              v-if="ite.field_name == '领单人'"
              style="display: block; width: 100%; text-align:center"
              >{{ ite.value }}的接单单据</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px;">
          <el-col :span="5" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right" > 客户名称:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '客户名称'"
              style="display: block; width: 100%; text-align: left"
              >{{ ite.value }}</span
            >
          </el-col>
        </el-row>
        <el-row style="margin-top:5px;">
          <el-col :span="5" style="text-align: right; padding-right: 10px">
            <span style="display: block; width: 100%; text-align: right" >   领单人:</span>
          </el-col>
          <el-col
            v-for="(ite, ind) in item"
            :key="ind"
            :span="18"
            style="text-align: left"
          >
            <span
              v-if="ite.field_name == '领单人'"
              style="display: block; width: 100%; text-align: left"
              >{{ ite.value }}</span
            >
          </el-col>
        </el-row>
      </div>
      <div style="page-break-after: always"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dayinlist: [],
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    console.log(JSON.parse(this.$route.query.data));
  },
  methods: {
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  padding: 25px;
  box-sizing: border-box;
}

#printArea {
  width:310px;
  padding:5px;
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid #000;
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  height: 35px;
  line-height: 35px;
}
#printArea table thead th {
  background-color: #0a8fa1;
}

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}
</style>
